<!-- 不使用 effectScope  -->
<script setup>
import { ref, computed, watch, watchEffect } from "vue";
let disposables = [];

const counter = ref(0);
const doubled = computed(() => counter.value * 2);

disposables.push(() => doubled.effect.stop());

const stopWatch1 = watchEffect(() => {
  console.log(`counter: ${counter.value}`);
});

disposables.push(stopWatch1);

const stopWatch2 = watch(doubled, () => {
  console.log(doubled.value);
});

disposables.push(stopWatch2);
const handleClick = () => {
  disposables.forEach((f) => f());
  disposables = [];
};
</script>

<template>
  <button @click="handleClick">停止</button>
  <p>{{ doubled }}</p>
  <button @click="counter++">增加</button>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
